<template>
	<view class="page">
		<view class="flex-between chat-interact">
			<view class="flex chat-interaction">
				<view class="flex chatItem">
					<text @click="recommendClick" :class="{recomClick: titleClick === '1'}">聊天</text>
					<u-badge v-show="chatMsgValue > 0" :isDot="true" type="success" bgColor="#FF4848"></u-badge>
				</view>

				<view class="flex chatItem">
					<text @click="selectedClick" :class="{recomClick: titleClick === '2'}">互动</text>
					<!-- <u-badge v-show="titleClick === '2'" :isDot="true" type="success" bgColor="#FF4848"></u-badge> -->
				</view>
			</view>
			<view class="flex-align scanIcon">
				<navigator url="/pages/chit-chat/scan/index">
					<u-icon name="scan" color="#6D6D6D" size="28"></u-icon>
				</navigator>
				<navigator url="/pages/chit-chat/notice/index">
					<u-icon name="bell" color="#6D6D6D" size="26"></u-icon>
				</navigator>
			</view>
		</view>
		<view class="hline" v-show="titleClick === '1'"></view>
		<view class="chatList" v-show="titleClick === '1'">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index">
					<view class="jobList flex">
						<view class="msg-num">
							<u-avatar shape="square" size="40" :src="item.url"></u-avatar>
							<u-badge class="msgNum" numberType="overflow" max="9" :value="item.value"></u-badge>
						</view>
						<view class="position">
							<view class="msg flex-between">
								<view class="name-job flex-align">
									<u--text :text="item.name" color="#3D3D3D" size="28rpx"></u--text>
									<u--text :text="item.job" color="#6D6D6D" size="24rpx"></u--text>
								</view>
								<u--text class="time" :text="item.time" color="#6D6D6D" size="24rpx"></u--text>
							</view>
							<view class="msg flex-align">
								<u--text class="time" text="【新消息】" color="#B8B8B8" size="28rpx"></u--text>
								<u--text class="time" text="您好，很高兴能与您沟通交流…" color="#6D6D6D" size="28rpx"></u--text>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 互动 -->
		<view class="interested flex" v-show="titleClick === '2'" @click="newJobSearch">
			<text class="grid-text" :data-index="baseListIndex" v-for="(baseListItem,baseListIndex) in baseList"
				:key="baseListIndex">{{baseListItem.title}}</text>
		</view>
		<!-- 看过我 -->
		<view class="learn-more" v-show="interactItem == '1'">
			<u--text class="more" text="想了解更多？" color="#3D3D3D" size="38rpx" bold></u--text>
			<u--image @click="showPreferSetting" class="cancel-icon" src="../../../static/cancel.png" width="28rpx"
				height="28rpx"></u--image>
			<view class="avatar-group flex-between">
				<u-avatar-group shape="square" :urls="urls" size="35" gap="0.2" maxCount="5"></u-avatar-group>
				<u-button type="primary" text="确定"></u-button>
			</view>
		</view>
		<!-- 看过我 -->
		<view v-show="titleClick === '2' && interactItem == '1' || titleClick === '2' && interactItem == '2'"
			class="bgpre name-ava" v-for="item in 6" @click="joberDetail">
			<view class="avatar flex-between">
				<view class="">
					<view class="name flex">
						<u--text class="xingming" text="郭春香" color="#3d3d3d" size="38rpx"></u--text>
						<u--text text="刚刚活跃" color="#6D6D6D;" size="24rpx"></u--text>
					</view>
					<view class="saraly flex">
						<view class="">6年</view>
						<view class="">本科</view>
						<view class="">20-22K</view>
					</view>
				</view>
				<u-avatar src="" shape="square" size="40"></u-avatar>
			</view>
			<view class="university flex-align">
				<image src="../../../static/mortarboard.png" mode=""></image>
				<u--text class="daxue" text="重庆大学" color="#3d3d3d" size="38rpx"></u--text>
			</view>
			<view class="university flex-align">
				<image src="../../../static/mortarboard.png" mode=""></image>
				<u--text class="daxue" text="锐明股份 · 产品经理" color="#3d3d3d" size="38rpx"></u--text>
			</view>
			<view class="flex products">
				<view class="unicoll">产品竞争</view>
				<view class="unicoll">用户需求</view>
				<view class="unicoll">产品规划</view>
				<view class="unicoll">需求分析</view>
			</view>
			<view class="flex commercial">
				<view class="content ellipsis-multiline">
					1.2年的商用车载安防产品规划及解决方案工作经验，熟悉视频服务，后装硬件产品。2.对国内外商用车载安全对国内外商用车载安全
				</view>
				<u--image src="../../../static/cancel.png" width="28rpx" height="28rpx"></u--image>
			</view>
		</view>
		<!-- 对我感兴趣 -->
		<view v-show="titleClick === '2' && interactItem == '0'" class="interestedinme flex-justify">
			<image class="interestImg" src="../../../static/mortarboard.png" mode=""></image>
			<text class="interestContent">还没有求职者对你感兴趣，快主动寻找求职者吧！</text>
			<u-button class="seek-jober" type="primary" text="寻找求职者"></u-button>
		</view>
		<!-- 我看过 -->
		<view v-show="titleClick === '2' && interactItem == '3'" class="interestedinme flex-justify">
			<image class="interestImg" src="../../../static/mortarboard.png" mode=""></image>
			<text class="interestContent">最近一周还没查看过求职者，快主动寻找求职者吧！</text>
			<u-button class="seek-jober" type="primary" text="寻找求职者"></u-button>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../../component/tabbar/index.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				titleClick: '1',
				chatMsgValue: 0,
				interactItem: '0',
				indexList: [{
					url: 'https://cdn.uviewui.com/uview/album/1.jpg',
					name: '郭春香',
					job: '产品经理',
					time: '17:00',
					value: 3
				}, {
					url: 'https://cdn.uviewui.com/uview/album/2.jpg',
					name: '刘二牛',
					job: '产品设计师',
					time: '11:00',
					value: 2
				}, {
					url: 'https://cdn.uviewui.com/uview/album/3.jpg',
					name: '刘二牛',
					job: '产品设计师',
					time: '昨天',
					value: null
				}, ],
				baseList: [{
						title: '对我感兴趣'
					},
					{
						title: '看过我'
					},
					{
						title: '新求职'
					},
					{
						title: '我看过'
					},
				],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				]
			};
		},
		onLoad() {
			this.loadmore()
			this.computedMsgValue()
		},
		methods: {
			recommendClick(e) {
				this.titleClick = '1'
			},
			selectedClick(e) {
				this.titleClick = '2'
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				// for (let i = 0; i < 30; i++) {
				// 	this.indexList.push({
				// 		url: this.urls[uni.$u.random(0, this.urls.length - 1)]
				// 	})
				// }
			},
			computedMsgValue() {
				this.indexList.forEach(item => {
					// console.log(item)
					this.chatMsgValue += item.value
					// console.log(this.chatMsgValue)
				})
			},
			joberDetail() {
				wx.navigateTo({
					url: '/pages/job-seekers/job-seeker-detail/index',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: 'test'
						})
					}
				})
			},
			newJobSearch(event) {
				// console.log(event)
				this.interactItem = event.target.dataset.index
				console.log(this.interactItem)
			}
		}
	}
</script>

<style lang="less">
	// .pagebg {
	// 	background-color: #ffffff;
	// }

	.recomClick {
		font-weight: bold !important;
		font-style: italic;
		font-size: 48rpx !important;
		color: #3d3d3d !important;
	}

	.chat-interact {
		padding: 20rpx 42rpx 0rpx 34rpx;
		background-color: #ffffff;
	}

	.hline {
		width: 750rpx;
		height: 32rpx;
		border-bottom: 1rpx solid #D8D8D8;
		background-color: #ffffff;
	}

	.chat-interaction {
		column-gap: 32rpx;
		align-items: flex-end;
	}

	.chat-interaction text {
		font-weight: 400;
		font-size: 36rpx;
		color: #6D6D6D;
	}

	.chatItem .u-badge {
		margin-left: 8rpx;
		margin-top: -2rpx;
		width: 12rpx;
		height: 12rpx;
	}

	.scanIcon {
		column-gap: 12rpx;
	}

	.chatList {
		padding: 46rpx 14rpx 0rpx 34rpx;
		background-color: #ffffff;
	}

	.jobList {
		align-items: flex-start;
		margin-bottom: 40rpx;
	}

	.position {
		flex: 1;
	}

	.name-job {
		align-items: flex-end;
		column-gap: 12rpx;
	}

	.name-job .u-text,
	.time {
		flex: 0;
		white-space: nowrap;
	}

	.time {
		margin-top: 18rpx !important;
	}

	.msg {
		height: 36rpx;
	}

	.msg-num {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		margin-right: 16rpx;
	}

	::v-deep .msgNum {
		position: absolute;
		top: 0rpx;
		right: 0rpx;

		span {
			font-size: 18rpx !important;
		}
	}

	.interested {
		padding: 28rpx 0rpx 16rpx 34rpx;
		column-gap: 60rpx;
		background-color: #ffffff;
	}

	.grid-text {
		white-space: nowrap;
		font-weight: 400;
		font-size: 20rpx;
		color: #B8B8B8;
		line-height: 28rpx;
	}

	.learn-more {
		// width: 100%;
		height: 188rpx;
		background-color: #FEFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 16rpx 14rpx 0rpx 14rpx;
		position: relative;
		overflow: hidden;
	}

	::v-deep .more {
		margin: 34rpx 0rpx 10rpx 28rpx !important;
	}

	::v-deep .cancel-icon {
		position: absolute;
		top: 20rpx;
		right: 22rpx;
	}

	.avatar-group {

		.u-button {
			width: 140rpx;
			height: 56rpx;
			background: #1872FF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0;
			margin-right: 48rpx;

			span {
				font-size: 24rpx;
				color: #F5F5F5;
			}
		}
	}

	.bgpre {
		width: calc(100%-32rpx);
		padding: 40rpx 16rpx 30rpx 16rpx;
		background-color: #FEFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		margin: 0rpx 14rpx 0rpx 16rpx;
	}

	.name-ava {
		margin-top: 16rpx;
	}

	.avatar {
		align-items: center;
	}

	.name {
		align-items: flex-end;
	}

	.xingming {
		/* width: 140rpx; */
		margin-right: 1rpx !important;
		line-height: 43rpx;
		white-space: nowrap;
	}

	.saraly view {
		width: 52rpx;
		height: 24rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #6D6D6D;
		line-height: 24rpx;
		text-align: left;
		white-space: nowrap;
		margin-top: 16rpx;
		padding: 0 20rpx;
		border-right: 1px solid #8d8d8d;
	}

	.saraly view:nth-child(3) {
		border: none;
	}

	.saraly view:nth-child(1) {
		padding-left: 0rpx;
	}

	.university {
		margin-top: 12rpx;
		align-items: center;
	}

	.university image {
		width: 18px;
		height: 13px;
	}

	::v-deep .daxue .u-text__value {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #6D6D6D !important;
		line-height: 40rpx !important;
		margin-left: 16rpx !important;
	}

	.products {
		column-gap: 12rpx;
		margin: 30rpx 0rpx 18rpx 0rpx;
	}

	.products view {
		width: 112rpx;
		height: 38rpx;
		background: #F5F5F5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #6D6D6D;
		line-height: 38rpx;
		text-align: center;
	}

	.commercial {
		align-items: flex-end;
		column-gap: 48rpx;
	}

	.commercial .content {
		font-size: 24rpx;
		color: #8A8A8A;
		line-height: 34rpx;
		text-align: left;
	}

	::v-deep .u-avatar-group__item {
		background-color: #ffffff;
		padding-left: 1rpx;
	}

	.interestedinme {
		flex-direction: column;
		margin-top: 200rpx;

		.interestImg {
			width: 375rpx;
			height: 279rpx;
		}

		.interestContent {
			font-weight: 400;
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			margin: 36rpx 0rpx 46rpx 0rpx;
		}

		.seek-jober {
			width: 205rpx;
			height: 84rpx;
			background-color: #1872FF;
			border-radius: 60rpx 60rpx 60rpx 60rpx;

			span {
				font-size: 28rpx;
				color: #F5F5F5;
			}
		}
	}
</style>